<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import YzmBtn from '@/components/YzmBtn.vue'
import Button from '@/components/Button.vue'
import { validEmail, validPwd, validNull } from '@/utils/valid'
import { registerApi, loginApi, forgetPasswordApi } from '@/api'
import { useUserStore } from '@/stores'
import { message } from 'ant-design-vue'

const route = useRoute()
const router = useRouter()
const formRef = ref()
const formData = ref({
  email: '',
  first_name: '',
  last_name: '',
  loginpass: '',
  code: '',
})
const type = ref('login') // 登录 login; 注册 register; 忘记密码: forget

const rules = {
  email: [{ validator: validEmail, trigger: 'blur' }],
  first_name: [{ validator: validNull, trigger: 'blur' }],
  last_name: [{ validator: validNull, trigger: 'blur' }],
  loginpass: [{ validator: validPwd, trigger: 'blur' }],
  code: [{ validator: validNull, trigger: 'blur' }],
}

// 切换类型
const switchType = (t) => {
  type.value = t
  formRef.value.resetFields()
}

// 登录
const login = () => {
  const { setToken } = useUserStore()
  const { email, loginpass } = formData.value
  const params = {
    email,
    loginpass,
  }
  loginApi(params).then((res) => {
    message.success('Login Successfully!')
    setToken(res.token?.access_token)
    router.push('/')
  })
  console.log(params)
}

// 注册
const register = () => {
  const params = {
    ...formData.value,
  }
  registerApi(params).then((res) => {
    message.success('Register Successfully!')
    switchType('login')
  })
}

// 忘记密码
const forget = () => {
  const { email, loginpass, code } = formData.value
  const params = {
    email,
    loginpass,
    code,
  }
  forgetPasswordApi(params).then(() => {
    message.success('Reset password successfully')
    switchType('login')
  })
}
// actions
const confirm = () => {
  formRef.value.validate().then(() => {
    if (type.value === 'login') {
      login()
    } else if (type.value === 'register') {
      register()
    } else {
      forget()
    }
  })
}

onMounted(() => {
  const { t } = route.query
  if (t) {
    switchType(t)
  }
})
</script>
<template>
  <div class="bg-gray-50">
    <div class="max-w-[1200px] flex flex-col gap-8 mx-auto pt-8 pb-10 max-[1200px]:p-3">
      <div class="flex gap-5 items-center">
        <div class="text-3xl max-[750px]:text-xl">Login / Signup</div>
        <div class="flex-1 h-0.5 bg-gray-300"></div>
      </div>
      <div class="p-3 border border-gray-200">
        <div class="text-3xl mb-5 max-[750px]:text-xl">
          {{ type === 'login' ? 'LOGIN' : type === 'register' ? 'SIGNUP' : 'FORG0T PASSWORD' }}
        </div>
        <div class="h-0.5 w-full bg-gray-300 mb-5"></div>
        <div class="mx-auto max-w-[50%] max-[750px]:max-w-[85%]">
          <a-form ref="formRef" :model="formData" :rules="rules" autocomplete="off">
            <a-form-item name="first_name" v-if="type === 'register'">
              <div class="flex flex-col gap-3">
                <label class="text-gray-500">First Name</label>
                <a-input v-model:value="formData.first_name" :bordered="false" />
              </div>
            </a-form-item>
            <a-form-item name="last_name" v-if="type === 'register'">
              <div class="flex flex-col gap-3">
                <label class="text-gray-500">Last Name</label>
                <a-input v-model:value="formData.last_name" :bordered="false" />
              </div>
            </a-form-item>
            <a-form-item name="email">
              <div class="flex flex-col gap-3">
                <label class="text-gray-500">Email</label>
                <a-input type="email" v-model:value="formData.email" :bordered="false" />
              </div>
            </a-form-item>
            <a-form-item name="loginpass">
              <div class="flex flex-col gap-3">
                <label class="text-gray-500">{{
                  type === 'forget' ? 'New password' : 'Password'
                }}</label>
                <div class="bg-gray">
                  <a-input-password v-model:value="formData.loginpass" :bordered="false" />
                </div>
              </div>
            </a-form-item>
            <a-form-item name="code" v-if="type !== 'login'">
              <div class="flex flex-col gap-3">
                <label class="text-gray-500">Verification code</label>
                <div class="flex gap-5">
                  <a-input class="flex-1" v-model:value="formData.code" :bordered="false" />
                  <YzmBtn :email="formData.email" :type="type === 'forget' ? 2 : 1" />
                </div>
              </div>
            </a-form-item>
          </a-form>
          <Button class="w-full" bg="#f9a044" @click="confirm">
            {{ type === 'login' ? 'SIGN IN' : type === 'register' ? 'SIGN UP' : 'RESET PASSWORD' }}
          </Button>
          <div
            class="cursor-pointer text-gray-500 mt-4 flex gap-3 justify-between max-[750px]:text-[11px]"
          >
            <span class="hover:text-[#333]" @click="switchType('forget')">
              Forgot Your Password ?
            </span>
            <span
              class="hover:text-[#333]"
              @click="switchType(type === 'login' ? 'register' : 'login')"
            >
              {{
                type === 'login'
                  ? "Don't have an account? Go to Register"
                  : 'Already have an account? Go to Login'
              }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ant-input,
.ant-input-password {
  line-height: 28px;
  border-radius: 0 !important;
  background-color: #f5f5f5;
  border: 1px solid #ccc !important;
}
</style>
